<template>
    <section>
        <el-row style="padding: 10px 30px;border-bottom: 1px solid #e6e6e6;">
            <el-col :span="12"><div class="grid-content bg-purple-dark" style="font-size: 20px;line-height: 40px;color: #606266;">店员管理</div></el-col>
            <el-col :span="6" :offset="6" style="text-align: right"><el-button type="primary" icon="el-icon-plus" @click="addS">添加店员</el-button></el-col>
        </el-row>
        <div class="inline-btn">
            <el-form :inline="true" class="mt">
                <el-form-item>
                    <el-button @click="reloadPage">刷新</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" :disabled="checkedList.length===0" @click="startUsing">启用</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="checkedList.length===0" @click="forbiddenUsing">禁用</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" :disabled="checkedList.length===0" @click="deleteSalesclerk">删除</el-button>
                </el-form-item>
            </el-form>
            <div style="text-align: right;width: 100%">
                <el-select v-model="statu" placeholder="状态">
                    <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="search" placeholder="店员姓名/用户名/手机号/店员昵称" style="width: 30%"></el-input>
                <el-button type="primary" @click="searchUserList">搜索</el-button>
            </div>

        </div>
        <!--列表-->
        <el-table
                stripe
                ref="multipleTable"
                :data="salesclerk_list"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="店员"
                    width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" class="fan-head">
                    <span>{{scope.row.nickname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="merch_name"
                    label="所属商户"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <el-button :type="miStatusColor(scope.row.status)" size="mini" @click="handleSta(scope.$index, scope.row)">{{ formatSta(scope.row) }}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="info" icon="el-icon-s-order" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"@click="deleteRow(scope.$index, scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-col :span="24" class="toolbar">
            <!--            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
            <!--                           :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">-->
            <!--            </el-pagination>-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-col>
<!--        编辑的弹出框-->
        <el-dialog
            title="编辑店员"
            :visible.sync="editDialogVisible"
            width="60%"
            center>
            <ul class="edit-member">
                <li>
                    <span class="member">选择会员</span>
                    <el-input v-model="OneMember.nickname" placeholder="请输入内容" style="width: 70%"></el-input>
                    <el-button type="primary" @click="userList2">搜索</el-button>
                    <div class="img-content" v-if="isShowImg">
                        <span @click="closeImg">✘</span>
                        <img :src="userLogo" alt="">
                    </div>
                </li>
                <li>
                    <span class="member">店员姓名</span>
                    <el-input v-model="OneMember.realname" placeholder="请输入姓名" style="width: 80%"></el-input>
                </li>
                <li>
                    <span class="member">手机号</span>
                    <el-input v-model="OneMember.mobile" placeholder="请输入手机号" style="width: 80%"></el-input>
                </li>
                <li>
                    <span class="member">状态</span>
                    <el-switch
                            v-model="OneMember.isUsing"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="makeSure">确 定</el-button>
            </span>
        </el-dialog>

<!--        添加店员的弹出框-->
        <el-dialog
            title="添加店员"
            :visible.sync="addDialogVisible"
            width="60%"
            center>
            <ul class="edit-member">
                <li>
                    <span class="member">选择会员</span>
                    <el-input v-model="addSalesclerkObj.selectNickname" placeholder="请输入内容" style="width: 70%"></el-input>
                    <el-button type="primary" @click="userList">搜索</el-button>
                    <div class="img-content" v-if="isShowImg2">
                        <span @click="closeImg">✘</span>
                        <img :src="userLogo2" alt="">
                    </div>
                </li>

                <li>
                    <span class="member">店员姓名</span>
                    <el-input v-model="addSalesclerkObj.realname" placeholder="请输入姓名" style="width: 80%"></el-input>
                </li>
                <li>
                    <span class="member">手机号</span>
                    <el-input v-model="addSalesclerkObj.mobile" placeholder="请输入手机号" style="width: 80%"></el-input>
                </li>
                <li>
                    <span class="member">状态</span>
                    <el-switch
                            v-model="addSalesclerkObj.isUsing"
                            active-text="启用"
                            inactive-text="禁用"
                            @change="addSwitch">
                    </el-switch>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMakeSre">确 定</el-button>
            </span>
        </el-dialog>

<!--        添加店员里面的搜索弹出dialog-->
        <el-dialog
                title="会员列表"
                :visible.sync="searchDialogVisible"
                width="50%"
                center>
            <div class="data_box">
                <span v-if="options.length===0">暂无数据</span>
                <el-row :gutter="20" v-for="(user,index) in options" :key="index" style="line-height: 30px;">
                    <el-col :span="2"><el-avatar shape="square" size="medium" :src="user.avatar" style="width: 30px;height: 30px;"></el-avatar></el-col>
                    <el-col :span="4">{{user.nickname}}</el-col>
                    <el-col :span="6">{{user.create_time}}</el-col>
                    <el-col :span="7">{{user.mobile}}</el-col>
                    <el-col :span="4"><el-button type="primary" size="mini" @click="handleIncrease(user)">选择</el-button></el-col>
                </el-row>
            </div>
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="searchDialogVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="searchDialogVisible = false">确 定</el-button>-->
<!--            </span>-->
        </el-dialog>

    </section>

</template>

<script>
    import { salesclerkList,setStartOrForbidden,editSalesclerk,addSalesclerk,singleSalesclerk,singleMember } from "../../api/salesclerkManagement";
    import { getMemberList } from '../../api/memberManagementAPI'
    export default {
        name: "salesclerk-management",
        data() {
            return {
                isShowData: false, // 有数据就不显示
                statu: '', // 搜索状态绑定的值
                status: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '启用'
                    },
                    {
                        value: 0,
                        label: '禁用'
                    }
                ], // 搜索的状态
                search: '', // 搜索框绑定的值
                totalCount: 0, // 总共多少条
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
                salesclerk_list: [], // 店员列表
                checkedList: [], // 选中的店员列表
                editDialogVisible: false, // 编辑按钮，弹出框默认不显示
                addDialogVisible: false, // 添加按钮，弹出框默认不显示
                onceDetail: {}, //单前点击的 会员信息
                OneMember: {
                    nickname: '', // 选择会员
                    realname: '', // 店员姓名
                    mobile: '', // 手机号
                    isUsing: '', // 是否禁用 和启用的值
                },
                options: [], // 选择会员的列表
                userLogo: '', // 选择会员的用户头像
                userLogo2: '', // 添加中的 选择会员的用户头像
                isShowImg: true, // 默认显示头像
                isShowImg2: false, // 添加店员的默认显示头像
                checkId: '', // 当前选择的会员 对应的id
                checkId2: '',
                addSalesclerkObj: {
                    selectNickname: '', // 搜索绑定的值
                    mid: '', // 选择会员
                    realname: '', // 店员姓名
                    mobile: '', // 手机号
                    isUsing: true, // 是否禁用 和启用的值
                },
                searchDialogVisible: false, // 添加店员里面的搜索dialog控制器
            }
        },
        created() {
            this._salesclerkList()

        },
        methods: {
            // 点击选择的时候
            handleIncrease(data) {
                console.log(data)
                this.addSalesclerkObj.selectNickname = data.nickname
                this.OneMember.nickname = data.nickname
                this.addSalesclerkObj.mid = data.id
                this.onceDetail.mid = data.id
                this.isShowImg2 = true
                this.isShowImg = true
                this.userLogo2 = data.avatar
                this.userLogo = data.avatar
                this.searchDialogVisible = false
            },
            // 搜索用户列表
            userList() {
                if (this.addSalesclerkObj.selectNickname === '') {
                    this.$message.error('请输入内容')
                }else {
                    this.searchDialogVisible = true
                    this._getMemberList(); // 会员列表
                }
            },
            // 编辑里面的搜索用户列表
            userList2() {
                if (this.OneMember.nickname === '') {
                    this.$message.error('请输入内容')
                }else {
                    this.searchDialogVisible = true
                    // 会员列表
                    let data = {
                        keyword: this.OneMember.nickname
                    }
                    getMemberList(data).then(res => {
                        console.log(res.data.member)
                        this.options = res.data.member
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }
            },
            // 获取所有的会员列表，编辑会员的时候需要用到会员的id
            _getMemberList() {
                let data = {
                    keyword: this.addSalesclerkObj.selectNickname
                }
                getMemberList(data).then(res => {
                    console.log(res.data.member)
                    this.options = res.data.member
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 刷新页面
            reloadPage() {
                // window.location.reload(); // 刷新当前页面
                location.reload();
            },
            // 打钩的事件
            handleSelectionChange(val) {
                this.checkedList = val;
                console.log(val)
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                // 改变每页显示的条数
                this.pageSize = val;
                this._salesclerkList()
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this._salesclerkList()
            },
            // 获取会员列表
            _salesclerkList() {
                let params = {
                    p: this.currentPage,
                    length: this.pageSize,
                    keyword: this.search
                };
                if (this.statu !== '') {
                    params = { ...params, status: this.statu }
                    // params.status = this.statu
                }
                console.log(this.pageSize)
                salesclerkList(params).then(res => {
                    console.log(res.data.list,'店员列表')
                    console.log(res)
                    this.salesclerk_list = res.data.list;
                    console.log(res.data.total)
                    this.totalCount = res.data.total;
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })

            },
            // 搜索事件
            searchUserList() {
                this._salesclerkList()
            },
            // 启用按钮
            startUsing() {
                let ids = this.checkedList.map(item => item.id)
                console.log(ids)
                let data = {
                    ids: ids,
                    status: 1
                }
                this.$confirm('确认启用选中的店员吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        status: 1
                    }
                    console.log(data)
                    setStartOrForbidden(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '启用成功'
                        });
                        this._salesclerkList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },
            // 禁用按钮
            forbiddenUsing() {
                let ids = this.checkedList.map(item => item.id)
                console.log(ids)
                this.$confirm('确认禁用选中的店员吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        status: 0
                    }
                    console.log(data)
                    setStartOrForbidden(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '禁用成功'
                        });
                        this._salesclerkList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },
            // 批量删除按钮
            deleteSalesclerk() {
                let ids = this.checkedList.map(item => item.id)
                console.log(ids)
                this.$confirm('确认删除选中的店员吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        delete: 1
                    }
                    console.log(data)
                    setStartOrForbidden(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                        this._salesclerkList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },
            // 启用和禁用按钮 颜色
            miStatusColor(val) {
                if (val === 1) {
                    return 'primary'
                } else {
                    return 'warning'
                }
            },
            //状态显示转换
            formatSta(row, column) {
                return row.status === 1 ? '启用' : row.status === 0 ? '禁用' : '未知';
            },
            // 列表-启用/禁用
            handleSta(index, row) {
                var text = "",
                    text1 = "";
                if (row.status === 1) {
                    text = "确认禁用？";
                    text1 = "禁用成功！"
                } else {
                    text = "确认启用？";
                    text1 = "启用成功！"
                }
                this.$confirm(text, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(index, row);
                    let status = row.status === 1 ? 0 : 1;
                    let params = {
                        ids: row.id,
                        status: status
                    };
                    this.$axios.post("/admin/clerk/batchedit", params)
                        .then(res => {
                            this.$message({
                                type: 'success',
                                message: text1
                            });
                            row.status = status
                        })
                        .catch(err => {
                            this.$message({
                                message: err.response.data.message,
                                type: 'error'
                            })
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            // 每行 删除按钮
            deleteRow(index, row) {
                console.log(index)
                console.log(row)
                let data = {
                    ids: row.id,
                    delete: 1
                }
                this.$confirm('确认删除选中的店员吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    setStartOrForbidden(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                        this._salesclerkList();
                    }).catch(err => {
                        this.$message({
                            message: err.response.data.message,
                            type: 'error'
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },
            // 每行 编辑按钮
            edit(index,row) {
                console.log(index)
                console.log(row)
                // this.isShowImg = true
                this.onceDetail = row // 把点击的单条信息暂时保存起来
                this.OneMember.nickname = row.nickname
                this.OneMember.avatar = row.avatar
                this.OneMember.realname = row.realname
                this.OneMember.mobile = row.mobile
                this.OneMember.isUsing = row.status === 0 ? true : false
                this.editDialogVisible = true
                let data = {
                    id: row.id
                }
                singleSalesclerk(data).then(res => {
                    console.log(res.data.list.avatar)
                    this.userLogo = res.data.list.avatar
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 编辑会员  ，点击确定的方法
            makeSure() {
                let data = {
                    id: this.onceDetail.id, // 店员id
                    mid: this.checkId || this.onceDetail.mid, // 会员id
                    realname: this.OneMember.realname, // 会员姓名
                    mobile: this.OneMember.mobile, // 手机号
                    status: this.OneMember.isUsing ? 1 : 0, // 状态(0-禁用 1-启用)
                }
                console.log(data)
                editSalesclerk(data).then(res => {
                    this.$message({
                        type: 'success ',
                        message: '提交成功'
                    });
                    this.onceDetail.avatar = this.userLogo // 头像
                    this.onceDetail.nickname = this.OneMember.nickname // 昵称
                    this.onceDetail.realname = this.OneMember.realname // 姓名
                    this.onceDetail.mobile = this.OneMember.mobile // 电话
                    this.onceDetail.status = this.OneMember.isUsing ? 0 : 1 // 禁用
                    console.log(this.onceDetail)
                    this.editDialogVisible = false // 隐藏dialog
                }).catch(err => {
                    let msg = err.response.data.message || '网络错误'
                    this.$message({
                        type: 'warning ',
                        message: msg
                    });
                })
            },
            // 关闭头像
            closeImg() {
                this.isShowImg = false
            },
            // 编辑会员选择 会员后 的事件
            selectOne(event) {
                console.log(event)
                this.options.forEach(item => {
                    console.log(item.nickname)
                    if (event === item.nickname) {
                        this.checkId = item.id
                        let data = {
                            id: item.id
                        }
                        console.log(2222)
                        singleMember(data).then(res => {
                            console.log(res.data.member.avatar)
                            this.userLogo = res.data.member.avatar
                        }).catch(err => {
                            this.$message({
                                message: err.response.data.message,
                                type: 'error'
                            })
                        })
                    }
                })
                this.isShowImg = true
            },
            // 添加店员
            addS() {
                this.addDialogVisible = true // 显示弹出框
            },
            // 添加店员 选择事件的
            // addSelectOne() {
            //     console.log(this.options)
            //     console.log(this.addSalesclerkObj.mid)
            //     this.options.forEach(item => {
            //         console.log(item.nickname)
            //         console.log(item)
            //         if (this.addSalesclerkObj.mid === item.nickname) {
            //             this.checkId2 = item.id
            //             this.userLogo2 = item.avatar
            //             this.isShowImg2 = true
            //         }
            //     })
            //     this.isShowImg = true
            // },
            // 添加店员 ，点击确认添加的回调
            addMakeSre() {
                if (this.addSalesclerkObj.realname ==='') {
                    this.$message({
                        type: 'warning ',
                        message: '请输入店员姓名'
                    });
                    return false
                }
                let data = {
                    mid: this.addSalesclerkObj.mid, // 选择会员
                    realname: this.addSalesclerkObj.realname, // 店员姓名
                    mobile: this.addSalesclerkObj.mobile, // 手机号
                    status: this.addSalesclerkObj.isUsing ? 1 : 0, // 是否禁用 和启用的值
                }
                console.log(data)
                addSalesclerk(data).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success ',
                        message: '添加成功'
                    });
                    this._salesclerkList()
                    this.addSalesclerkObj.mid = ''
                    this.addSalesclerkObj.realname = ''
                    this.addSalesclerkObj.mobile = ''
                    this.addSalesclerkObj.isUsing = false
                    this.isShowImg2 = false
                    this.addDialogVisible = false // 隐藏弹出框
                }).catch(err => {
                    let msg = err.response.data.message || '网络错误'
                    this.$message({
                        type: 'warning ',
                        message: msg
                    });
                })

            },
            // 添加店员 ，里面的开关事件
            addSwitch(val) {
                console.log(val)
                this.addSalesclerkObj.isUsing = val
            }
        }
    }
</script>

<style scoped>
    ul {
        list-style: none;
    }
    .edit-member li{
        margin-bottom: 5px;
    }
    .edit-member li span {
        display: inline-block;
        width: 60px;
    }
    .inline-btn {
        display: flex;
        margin-top: 20px;
        flex: 1;
    }
    .mt {
        display: flex;
        flex: 1;
    }
    .fan-head {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .member {
        padding-right: 10px;
    }
    .img-content {
        display: inline-block;
        position: relative;
        margin-left: 75px;
        padding: 5px;
        border: 1px solid #ddd;
        margin-top: 5px;
    }
    .img-content span {
        position: absolute;
        left: 148px;
        top: 0;
        font-size: 18px;
        cursor: pointer;
    }
    .img-content img {
        border-radius: 5px;
    }
    .data_box{
        margin: 10px;
        max-height: 360px;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
